<template>
	<view class="info">
		<view class="it" v-for="(item,index) in list"  @click="goDetails(item.productInfo.id)">
			<view class="image">
				<image :src="item.productInfo.image" mode="aspectFill"></image>
			</view>
			<view class="text">
				<view>
					<view class="h1">
						{{item.productInfo.store_name}}
					</view>
					<view class="span">
						{{item.attrInfo.suk}}
					</view>
				</view>
				<view class="money-box">
					<view class="money">
						<view class="em">￥</view>{{item.productInfo.price}}
					</view>
					<view class="num">x{{item.cart_num}}</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script setup>
	import {ref} from "vue"
	let props = defineProps({
			isShowDetails:{
				type:Boolean,
				default:true
			},
			list:{
				type:Array,
				default:[]
			}
		});
	const goDetails=(id)=>{
		if(props.isShowDetails){
			uni.navigateTo({
				url:'/pages/goods/details?id='+id
			})
		}
	}
		
</script>

<style scoped lang="scss">
	.info{
		padding:28rpx 0;

		.it{
			
			display: flex;
			margin-top:24rpx;
			&:nth-child(1){margin-top:0;}
			
		}
		
		
		.image{
			width:180rpx;height:180rpx;
			border-radius: 12rpx;
			overflow: hidden;
			position: relative;
			image{
				width:100%;height:100%;display: block;
			}
			.icon{
				position: absolute;top:0;left:0;
				width:32rpx;height:32rpx;
			}
		}
		.text{
			flex:1;
			width:442rpx;
			padding:8rpx 0;
			margin-left:20rpx;line-height: 1;
			display: flex;
			justify-content: space-between;
			flex-direction: column;
			.h1{
				font-weight: bold;
				font-size: 30rpx;
				white-space: nowrap; /* 防止文本换行 */
				overflow: hidden; /* 隐藏溢出的文本 */
				text-overflow: ellipsis; /* 显示省略号 */
			}
			.span{
				margin-top:20rpx;
				font-size: 24rpx;
				color:#838A99;
			}
			.money-box{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.num{
					color:#979797;
					font-size: 28rpx;
				}
			}
			.money{
				display: flex;
				font-weight: bold;
				color:#F5493D;
				color:#141311;
				font-size: 36rpx;
				align-items: flex-end;
				.em{
					font-size:24rpx;
				}
			}
		}
	}
</style>